<style lang="less">
  .padding {
    box-sizing: border-box;
    padding: 0px 30px;
  }
  .user_container {
    width: 100%;
    height: 100%;
    font-size: 28px;
    background-color: #F1F1F1;
    @import '../assets/less/nav.less';
    .info_panel {
      width: 100%;
      height: 400px;
      background-color: rgb(254, 155, 78);
      box-sizing: border-box;
      padding: 0px 30px;
      .avatar {
        width: 100%;
        height: 400px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        >img {
          width: 240px;
          height: 240px;
          background-color: rgba(255, 255, 255, 0.4);
          border: 0;
          margin: 0;
          padding: 0;
          margin-top: -40px;
        }
        .edit_avatar {
          height: 60px;
          width: 240px;
          margin-top: -60px;
          background-color: rgba(255, 255, 255, 0.8);
          line-height: 60px;
          color: #F5A623;
        }
      }
      .info {
        width: 100%;
        min-height: 600px;
        background-color: #FFFFFF;
        margin-top: -60px;
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
        box-sizing: border-box;
        padding: 30px 0;
        font-size: 36px;
        .item {
          width: 100%;
          height: 100px;
          display: flex;
          flex-direction: row;
          justify-content: flex-start;
          align-items: center;
          border-bottom: 1px solid #F1F1F1;
          box-sizing: border-box;
          padding: 0 30px;
          >div {
            &:nth-child(1) {
              width: 420px;
              text-align: left;
            }
            &:nth-child(2) {
              width: 100%;
              text-align: left;
              >input {
                width: 100%;
                font-size: 36px;
                border: 0;
                padding: 0;
              }
            }
          }
        }
      }
      .handle-box {
        background-color: #FFFFFF;
        box-sizing: border-box;
        padding: 50px;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        .button {
          width: 40%;
          background-color: rgb(0, 124, 248);
          color: #FFFFFF;
          height: 90px;
          line-height: 100px;
          font-size: 32px;
          border-radius: 20px;
        }
      }
      .tips {
        width: 100%;
        height: 100px;
        line-height: 100px;
        text-align: center;
        background-color: #FFFFFF;
        color: #999999;
      }
    }
  }
</style>

<template>
  <div class="user_container">
    <div class="nav">
      <div class="left">
        <van-icon name="arrow-left" @click="bindNavigateBack"></van-icon>
      </div>
      <div>个人中心</div>
      <div class="user" @click="bindToAuth">
        <!-- <van-icon name="manager"></van-icon> -->
      </div>
    </div>
    <div class="info_panel">
      <div class="avatar">
        <img :src="userInfo.user.headimage" />
        <div class="edit_avatar" @click="bindChangeAvatar" v-show="false">
          <van-uploader :after-read="onReadImage">
            修改头像
          </van-uploader>
        </div>
      </div>
      <div class="info" v-show="!edit">
        <div class="item">
          <div>姓名*</div>
          <div>{{ userInfo.user.username }}</div>
        </div>
        <div class="item">
          <div>电话*</div>
          <div>{{ userInfo.user.phone }}</div>
        </div>
        <div class="item">
          <div>公司</div>
          <div>{{ userInfo.user.company }}</div>
        </div>
        <div class="item">
          <div>职位</div>
          <div>{{ userInfo.user.job }}</div>
        </div>
      </div>
      <div class="info" v-show="edit">
        <div class="item">
          <div>姓名*</div>
          <div>
            <input type="text" v-model="userInfo.user.username" placeholder="请输入姓名" />
          </div>
        </div>
        <div class="item">
          <div>电话*</div>
          <div>
            <input v-model="userInfo.user.phone" maxlength="11" placeholder="请输入电话" />
          </div>
        </div>
        <div class="item">
          <div>公司</div>
          <div>
            <input v-model="userInfo.user.company" placeholder="请输入公司名" />
          </div>
        </div>
        <div class="item">
          <div>职位</div>
          <div>
            <input v-model="userInfo.user.job" placeholder="请输入职位" />
          </div>
        </div>
      </div>
      <div class="handle-box">
        <div class="button" v-if="isMiniProgram" @click="bindNavigateMiniProgram">前往小程序</div>
        <!-- <div class="button" @click="bindEdit">{{ edit==true?'保存':'修改资料' }}</div> -->
      </div>
      <div class="tips">完善名片，让客户主动找您买房</div>
    </div>
  </div>
</template>


<script>
  import {
    Button,
    NavBar,
    Icon,
    Uploader
  } from "vant";
  import wx from 'weixin-js-sdk'
  export default {
    name: "list",
    components: {
      [Button.name]: Button,
      [NavBar.name]: NavBar,
      [Icon.name]: Icon,
      [Uploader.name]: Uploader
    },
    data: function() {
      return {
        edit: false,
        userInfo: {
          user: {
            username: '',
            phone: '',
            company: '',
            job: ''
          }
        },
        isMiniProgram: false
      }
    },
    methods: {
      bindNavigateBack: function(e) {
        this.$router.go(-1);
      },
      bindEdit: function() {
        if (this.edit == true) {
          this.__updateUserInfo();
        }
        this.edit = !this.edit;
      },
      bindToAuth: function() {
        // this.$router.push('auth');
      },
      bindChangeAvatar: function() {},
      onReadImage: function(e) {
        console.log(e);
        let param = new FormData();
        param.append('image', e.file);
        console.log('onReadImage', param.get('file'))
        let config = {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        }
        // let base_url = this.globalData.base_url;
        let base_url = 'https://www.fangzhiliao.com'
        this.axios.post(base_url + '/headimage', param, config).then(function(res) {
          console.log('uploadresult', res);
        })
      },
      __getUserInfo() {
        let self = this;
        let access_token = '';
        let userId = this.globalData.userId;
        this.axios.get(this.globalData.base_url + "/userinfo", {
          params: {
            userid: userId
          }
        }).then(function(res) {
          if (res.status == 500) {
            alert('服务器错误');
            return;
          }
          if (res.data.resultCode == 'error') {
            alert(res.data.resultDesc);
          } else {
            self.globalData.userInfo = res.data.resultObj;
            self.userInfo = res.data.resultObj;
          }
        });
      },
      __updateUserInfo() {
        let self = this;
        let userId = this.globalData.userId;
        if (self.userInfo.user.username == null || self.userInfo.user.username == '') {
          return;
        }
        if (self.userInfo.user.phone == null || self.userInfo.user.phone == '') {
          return;
        }
        this.axios.get(this.globalData.base_url + "/eitduser", {
          params: {
            userid: userId,
            username: self.userInfo.user.username,
            phone: self.userInfo.user.phone,
            company: self.userInfo.user.company == null ? '' : self.userInfo.user.company,
            job: self.userInfo.user.job == null ? '' : self.userInfo.user.job
          }
        }).then(function(res) {
          if (res.data.resultDesc) {
            alert(res.data.resultDesc);
          }
          self.__getUserInfo();
        });
      },
      __getId() {
        this.globalData.userId = this.$route.query.id;
      },
      __getWeixinJsConfig() {
        let self = this;
        this.axios.get(this.globalData.base_url + "/webjs", {
          params: {
            url: location.href.split('#')[0],
          }
        }).then(function(res) {
          console.log(res);
          console.log(self.wx.miniProgram.checkJSApi());
          self.wx.config({
            debug: true, // 开启调试模式,
            appId: res.data.resultObj.appId, // 必填，企业号的唯一标识，此处填写企业号corpid
            timestamp: res.data.resultObj.timestamp, // 必填，生成签名的时间戳
            nonceStr: res.data.resultObj.nonceStr, // 必填，生成签名的随机串
            signature: res.data.resultObj.signature, // 必填，签名，见附录1
            jsApiList: ['scanQRCode'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
          });
        });
        self.wx.ready(function(e) {
          console.log('self.wx.ready', e);
        })
      },
      bindNavigateMiniProgram: function() {
        this.wx.miniProgram.switchTab({
          url: '/pages/mine'
        })
      }
    },
    created() {
      let self = this;
      this.__getId();
      this.__getUserInfo();
      // this.$router.push('auth')
      this.wx.miniProgram.getEnv(function(res) {
        if (res.miniprogram) {
          self.isMiniProgram = true;
        }
      })
    }
  };
</script>